<template>
  <!-- 案例组件 -->
  <div>
    <div v-show="!showItem">
      <div class="case-title">
        <sapn class="caseFirst">经典案例</sapn>
        <sapn class="caseSecond">各种丰富的真实案例供您参考~</sapn>
        <div class="case-search">
          <el-input
            placeholder="请输入你想要的内容"
            clearable
            class="search-input"
          />
          <div class="search-btn">搜索</div>
        </div>
      </div>
      <div class="case-listbox">
        <div class="buttonList">
          <span class="hot-title">热门搜索</span>
          <div style="display: flex">
            <el-button
              v-for="(item, index) in btnList"
              :key="index"
              :color="item.background"
              :style="{ color: item.color }"
              >{{ item.text }}</el-button
            >
          </div>
        </div>
        <!-- 具体的数据 -->
        <div class="contentList">
          <div
            v-for="(item, index) in btnList"
            :key="index"
            class="itemBox"
            @click="choseItem(item, index)"
          >
            <el-image :src="flexible" class="itemimage" />
            <div class="itemWhite">
              <span class="item-name">{{ item.headline }}</span>
              <div class="publicFlex">
                <div class="periodType">
                  <el-image :src="period" class="smallImage" />
                  <span class="gary">周期：</span>
                  <span class="garyType">{{ item.time }}</span>
                </div>
                <div class="periodType">
                  <el-image :src="typeImage" class="smallImage" />
                  <span class="gary">类型：</span>
                  <span class="garyType">{{ item.type }}</span>
                </div>
              </div>
              <div class="dollar">
                <span class="dollar-unit">￥</span>
                <span class="dollar-num">{{ item.money }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="demo-pagination-block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 详情 -->
    <div v-if="showItem">
      <CaseDetails :details="shoseDetails"></CaseDetails>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CaseDetails from "./CaseDetails.vue";

import {
  flexible,
  period,
  typeImage,
} from "@/config/userFileImg.js";

const btnList = ref([
  {
    headline: "(资产管理系统）DRG/DIP管理系统",
    time: "60天",
    type: "整包项目",
    money: "2.000.000",
    text: "web",
    color: "#165DFF",
    background: "#165dff0c",
  },
  {
    headline: "(资产管理系统）DRG/DIP管理系统",
    time: "60天",
    type: "整包项目",
    money: "2.000.000",
    text: "APP",
    color: "#7000FF",
    background: "#7000ff0c",
  },
  {
    headline: "(资产管理系统）DRG/DIP管理系统",
    time: "60天",
    type: "整包项目",
    money: "2.000.000",
    text: "小程序",
    color: "#FC8800",
    background: "#fc88000c",
  },
  {
    headline: "(资产管理系统）DRG/DIP管理系统",
    time: "60天",
    type: "整包项目",
    money: "2.000.000",
    text: "H5",
    color: "#00BE1E",
    background: "#00be1e0c",
  },
]);
const showItem = ref(false);
const shoseDetails = ref({});
const choseItem = (item, index) => {
  shoseDetails.value = item;
  showItem.value = true;
};
// 分页相关数据
const currentPage = ref(1); // 当前页数
const pageSize = ref(10); // 每页显示的条目数量
const totalItems = ref(100); // 总条目数量

// 分页事件处理器
const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  currentPage.value = val;
};
</script >
<style lang="scss" scoped>
.case-title {
  height: 228px;
  background-size: cover;
  background-image: url("@/assets/caseTitle.png");
  display: flex;
  flex-direction: column;
  align-items: center;
  & {
    font-family: PingFang SC, PingFang SC;
    font-style: normal;
    text-transform: none;
  }
  position: relative;
}
.caseFirst {
  margin-top: 80px;
  font-weight: 600;
  font-size: 32px;
  color: #333333;
}
.caseSecond {
  margin-top: 10px;
  font-weight: 400;
  font-size: 16px;
  color: #86909c;
}
.case-search {
  position: absolute;
  bottom: -30px;
  width: 632px;
  height: 40px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
  border-radius: 27px;
}
.search-input {
  height: 40px;
  border-radius: 27px;
}
.search-btn {
  width: 93px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: #165dff;
  color: #fff;
  border-radius: 27px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  font-style: normal;
  text-transform: none;
}
// 列表
.case-listbox {
  padding: 60px 312px 46px 312px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.buttonList {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hot-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  font-style: normal;
  text-transform: none;
}
.itemBox {
  width: 364px;
  height: 346px;
  background: #f7fbff;
  border-radius: 16px;
  border: 1px solid #dfe8f2;
  padding: 12px;
  cursor: pointer;
}
.contentList {
  margin-top: 40px;
  display: flex;
  flex-flow: wrap;
  gap: 24px;
  min-height: 850px;
}
.itemimage {
  width: 360px;
  height: 222px;
  border-radius: 8px;
}
.itemWhite {
  margin-top: 12px;
  background: #fff;
  padding: 12px;
}
.item-name {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  font-style: normal;
  text-transform: none;
}
.smallImage {
  width: 16px;
  height: 16px;
}
.periodType {
  display: flex;
  align-items: center;
  gap: 2px;
}
.gary {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #86909c;
  font-style: normal;
  text-transform: none;
}
.garyType {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #333333;
  font-style: normal;
  text-transform: none;
}
.publicFlex {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.dollar {
  margin-top: 12px;
  & {
    font-family: PingFang SC, PingFang SC;
    color: #fc4c00;
    font-style: normal;
    text-transform: none;
  }
  .dollar-unit {
    font-weight: 400;
    font-size: 12px;
  }
  .dollar-num {
    font-weight: 500;
    font-size: 20px;
  }
}
.demo-pagination-block {
  margin-top: 38px;
}
</style>
<style scoped>
::v-deep .el-input__wrapper {
  background-color: #f5f7fa;
  box-shadow: none;
  border-radius: 27px;
}
::v-deep .el-input-group__append {
  border-radius: 0 27px 27px 0;
  box-shadow: none;
}
</style>